我是個資訊科系的大學生，但是沒什麼電腦基礎，在大學的課程裡都是無腦跟著老師上課，要coding時就請GPT幫忙，但我覺得以後這樣不行，所以想藉由這次鐵人賽，鍛鍊自己的網頁Web能力。
這次30天我打算用基礎的HTML+CSS+JavaScripts寫一個有關糖尿病的網頁，目前的方向是希望能寫出一個病人可以使用的自我監測網頁做為練習，家人也能透過此網頁確認患者的狀況，希望最後可以寫出一個基本功能都有的網頁。之後有機會更進階的話，希望能用到 react + typescript + vite + tailwind css 聽教授說這是一種滿新的技術，而且也好用。
目前的計畫是用GPT新推出的「study and learn」模式，從0開始學習，這個模式跟以往不一樣的是會針對你的提問解釋後，最下面會問問題，如果是計畫的話，會跟你確認想要的計畫是怎麼樣的；如果是針對知識提問，會先清楚的解釋，最後出幾個小問題給你回答，讓我們對於知識更有掌握度。
那接下來就進入正題吧！
首先是整體 Web ，如果以房子比喻的話，我們能這樣想像：
| 語言 | 功能 |
|---|---|
| HTML | 房子的骨架 |
| CSS | 房子的裝潢 |
| JavaScripts | 房子的功能 |
今天是第一天，我學習了基本的HTML，最基礎會用到的標籤有哪些，他們的作用是什麼。主要分成三個部分：結構元素、內容標籤、<head>內常見元素。
下面的部分同時也當作我以後可以看的筆記。
<! DOCTYPE html>
<nav>
放置網站主要導覽連結 ( 會在隔天的進度出現)
<footer>
放置頁面的底部資訊，像是：版權宣告、聯絡資訊、網站小說明、社群連結
<html>
HTML頁面根元素
<head>
<title>、編碼、CSS連結<body>
<hi> 、<p>、<img>、<ul>
<h1> ~ <h6>
<h1>)<h2> ~ <h6>，代表不同層級小標題<p>
<h1>(標題類)，但可以放<strong>、<a> ( 內聯 )<strong>
<b>差別是：<b>只是單純粗體，但<strong> 會告訴瀏覽器這是重點<a href = 網址>
target = “_blank”：在新分頁打開<img src = “ 網址” alt = “說明文字”>
alt 為代替文字→圖片不顯示時<ul>、<li>
<ol>、<li>
<title>
頁籤上顯示的標題文字
<meta charset = “UTF-8”>
<link rel = “stylesheet” href = “style = style.css”>
外部引入CSS樣式檔 ( 放<head>裡 )
實作的部分，嘗試一個個打出來，先當作小練習，所以都只有最基礎的架構。
哈囉版主，很棒的開頭！看到您從零開始挑戰鐵人賽，並設定實用的糖尿病監測網頁作為專案目標，這學習方式非常有動力也很有意義。您用房子來比喻 Web 結構，讓基礎概念變得清晰易懂，HTML 核心標籤的筆記也整理得非常詳盡。
特別好奇您提及的 GPT "study and learn" 模式，聽起來對初學者來說是個強大的工具，期待您未來分享更多利用它來循序漸進學習的心得。對於後續 JavaScript 處理數據與互動功能的實作，想必會是個有趣且具挑戰性的部分，我很期待您的分享！加油！
也歡迎版主有空參考我的系列文「南桃AI重生記」：
https://ithelp.ithome.com.tw/users/20046160/ironman/8311
iThome鐵人賽
看影片追技術